<template>
	<view :class="!empty ? 'padding-top-big' : '' ">

		<!-- 空白页 -->
		<use-empty v-if="empty" e-style="round" e-type="search" tip="搜索数据为空" btn-tip="重新搜索" height="70vh" :auto="false"
			@goto="tosearch"></use-empty>

		<!-- 列表区 -->
		<view v-else>
			<!-- 搜索内容区 -->
			<view class="navbar search-area pos-r w-full padding-lr dflex-b" :style="{ position: headerPosition }">
				<view class="h-full flex1 dflex-c">
					<view class="icon-search pos-a">
						<text class="iconfont iconsousuo-01"></text>
					</view>
					<input type="text" class="pos-a padding-left padding-tb-xs border-radius-lg box-sizing-b" maxlength="20"
						placeholder="请输入关键字" @confirm="search" v-model="keyword" />
				</view>

				<view class="bg-base border-radius-big padding-tb-xs padding-lr margin-left" @click="search">搜索</view>
			</view>
			<view class="gap"></view>
	
			<!-- 商品列表区 -->
			<view class="goods-list">
				<view class="list dflex-b dflex dflex-wrap-w w-full">
					<view class="item bg-main border-radius-sm padding-bottom-sm" v-for="(item, index) in goodsDatas" :key="index"
						@click="togoods(item)">
						<view class="image-wrapper">
							<image mode="aspectFill" :lazy-load="true" :src="item.defaultImg"></image>
						</view>
						<text class="title clamp padding-sm">{{ item.title }}</text>
						<view class="padding-left-sm dflex-b">
							<text class="price">{{ item.price }}</text>
							<text class="ft-dark margin-right-sm fs-xs">已售 {{item.sale_cnt || 0 }}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 上拉加载更多 -->
			<!-- <use-loadmore :type="loadmoreType"></use-loadmore> -->
		</view>

		<!-- 置顶 -->
		<use-totop ref="usetop"></use-totop>

		<!-- 03. 猜你想要 -->
		<use-hot-goods v-if="empty" title-type="round" title="猜你想要"></use-hot-goods>
	</view>
</template>

<script>
	import {
		searchProductsApi
	} from "@/api/index.js";
	
	import {
		querySecondProductsApi,
	} from "@/api/classes.js"

	export default {
		data() {
			return {
				empty: false,
				headerPosition: "fixed",
				// 0综合排序 1销量优先 2价格排序
				filterIndex: 0,
				// 1价格从低到高 2价格从高到低
				priceOrder: 0,
				// 商品数据
				goodsDatas: [],
				// 加载更多状态
				loadmoreType: 'more',
				// 请求数据
				reqdata: {
					currentPage: 1,
					pageSize: 10,
					title: "",
					total: 0,
					// rows: 8,
					// sidx: 'sort',
					// sord: 'asc'
				},
				scrollTop: 0,
				keyword: "",
				second_cid: "",
				
			};
		},
		watch: {
			// 显示空白页
			goodsDatas(e) {
				let empty = e.length === 0;
				if (this.empty !== empty) {
					this.empty = empty;
				}
			}
		},
		onPageScroll(e) {
			// 兼容iOS端下拉时顶部漂移
			if (e.scrollTop >= 0) {
				this.headerPosition = "fixed";
			} else {
				this.headerPosition = "absolute";
			}
			// this.scrollTop = e.scrollTop
			this.$refs.usetop.change(e.scrollTop);
		},
		//下拉刷新
		onPullDownRefresh() {
			this.reqdata.currentPage = 1;
			this.loadData();		
		},
		//加载更多
		onReachBottom() {
			if(this?.reqdata?.currentPage*this?.reqdata?.pageSize < this?.reqdata?.total) {
				this.reqdata.currentPage++;
				this.loadData();		
			}
		},
		onLoad(options) {
			// console.log(options,"<=================this.options")
			let title = '搜索列表';
			// if (options && options.hot) {
			// 	title = '热门推荐';
			// } else if (options && options.limited) {
			// 	title = '限时精选';
			// }
			this.second_cid = options.cid;
			// options = JSON.parse(options)
			
			if(this.second_cid){
				this.getSecondGoods();
			};
			
			console.log(this.second_cid,"<========================goods-classes.this.second_cid")
			console.log(options,"<========================goods-classes.options")
			
			uni.setNavigationBarTitle({
				title: title
			})

			// for (let key in options) {
			// 	this.reqdata[key] = decodeURIComponent(options[key]);
			// }

			// this.loadData();
		},
		methods: {
			// 加载商品，下拉刷新|上拉加载
			async loadData(type = 'add', loading) {

				if (this.loadmoreType === 'loading') {
					// 防止重复加载
					return;
				}

				console.log(this.reqdata,"<=================搜索参数")
				const response = await searchProductsApi(this.reqdata).catch(() => {});
				if (response?.code === 200) {
					let _datas = [];
					response?.data?.records?.forEach((row) => {
						_datas.push(row);
					});

					this.goodsDatas = [...this.goodsDatas, ..._datas];
					this.reqdata.total = response?.data?.total ?? 0;
					if(this?.reqdata?.currentPage*this?.reqdata?.pageSize < this?.reqdata?.total) {
						this.loadmoreType = 'nomore'
					} else {
						this.loadmoreType = 'nomore'
					}
				
				}

				if (response?.data?.records?.length === 0) {
					this.empty = true;
				}

			
			},
		
			search() {
				this.reqdata.title = this.keyword;
				uni.pageScrollTo({
					duration: 300,
					scrollTop: 0
				})
				this.goodsDatas = [];
				// this.loadData('refresh', 1);
				this.loadData();
				// uni.showLoading({
				// 	title: '正在加载'
				// })
			},
			// 搜索页
			tosearch() {
				if (this.$api.pages().length > 1) {
					uni.navigateBack();
					return;
				}
				this.$api.tosearch();
			},
			
			
			// 商品详情
			togoods(options) {
				this.$api.togoods({
					// id: options._id,
					id: options.id,
					
				});
			
		
			},
			
			//获取二级分类商品
			async getSecondGoods(){
					this.goodsDatas = [];
					// 根据当前 cid 加载商品数据列表
					
			
				
						const response = await querySecondProductsApi({
							cid: this.second_cid,
						}).catch(()=>{});
						console.log("🚀🚀🚀🚀🚀 querySecondProductsApi:", response);
						if(response?.code === 200) {
							this.goodsDatas = response?.data?.response ?? [];
							console.log(this.goodsDatas,"<==============this.goodsDatas.getSecondGoods ")
						}else {
							this.$api.msg("服务器繁忙，分类查询失败")
						}
			},
			
			
			
		},
	}
</script>


<style lang="scss">
	page {
		background-color: $page-color-base;
	}

	.navbar {
		top: var(--window-top);
		left: 0;
		height: 100rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, .06);
		z-index: 10;

		.nav-item {
			color: $font-color-dark;
			font-size: 30rpx;

			&.active {
				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120rpx;
					height: 0;
					border-bottom: 4rpx solid $base-color;
				}
			}
		}

		.iconfont {
			width: 30rpx;
			height: 14rpx;
			font-size: 20rpx;
			line-height: 1;
			margin-left: 4rpx;
		}
	}

	.goods-list {
		.list {
			padding: 0 3vw 20rpx;
		}

		.item {
			width: 46vw;
			overflow: hidden;
			margin-top: 2vw;

			&:nth-child(2n) {
				margin-left: 1vw;
			}

			&:nth-child(2n + 1) {
				margin-right: 1vw;
			}
		}

		.image-wrapper {
			width: 100%;
			height: 300rpx;
			overflow: hidden;

			image {
				width: 100%;
				height: 100%;
				opacity: 1;
			}
		}
	}

	.search-area {
		height: 120rpx;
		background-color: #fff;

		input {
			width: 560rpx;
			padding-left: 60rpx;
			height: 64rpx;
			line-height: 64rpx;
			background-color: #f5f5f5;
		}

		.icon-search {
			top: 50%;
			left: 40rpx;
			transform: translate(0, -50%);
			z-index: 1;

			text {
				color: #c0c0c0;
			}
		}
	}
</style>